<template>
  <el-drawer :title="title" :visible.sync="expand" :width="width" :direction="direction"
             @opened="onOpen" @close="onClose" append-to-body>
    <slot :object="object" :dialog="this"></slot>
  </el-drawer>
</template>

<script>
/* eslint-disable */
import Layers from "@/lang/layers";

/**
 * 弹窗
 *
 * 需求：一个界面如果存在大大小小的弹窗，需要控制一堆的参数，这时候我们希望参数能内聚在一个组件中。
 *
 * dialog 开始展开，到完全展开的过程中，有一定的时间延迟，
 * then() 会将回调函数的执行时间，延迟到组件初始化完成。
 *
 * 样例代码如下，注意 then() 的参数，不能省略 ()=>{}，
 * 注意这是一个回调函数，而不是 Promise 函数，
 * 省略之后，不构成语法错误，但是可能会触发很多undefined类型的报错。
 *
 * this.$refs.dialog.open(dialog).then(() => {
 *     this.$refs.modifyForm.val(scope.row);
 * });
 */
export default {
    name: "SeaDrawer",
    props: {
        // 关闭事件
        onCloseDialog: {type: Function, default: undefined}
        // 展示操作按钮
        , showButton: {type: Boolean, default: false}
        // 确定事件
        , onSubmit: {type: Function, default: undefined}
        // 方向
        , direction: {type: String, default: 'rtl'}
        // 显示 header
        , withHeader: {type: Boolean, default: true}
    },
    data() {
        return {
            //回调函数
            callback: undefined
            // 是否展开
            , expand: false
            // 标题
            , title: ''
            // 宽度
            , width: '50%'
            // 是否全屏
            , fullscreen: false
            // 弹窗状态
            , opened: false

            // 允许向插槽传递一个对象
            , object: undefined
        }
    },
    methods: {
        /**
         * 提交按钮点击事件
         */
        onSubmitClick: function () {
            Layers.executeMethod(this.onSubmit, this.object);
        }
        /**
         * 事件回调
         *
         * @param opts  弹窗参数
         * @returns {Function}
         */
        , open: function (opts) {
            if (opts !== undefined) {
                this.title = opts.title;
                this.width = opts.width;
                this.object = opts.object;
            }
            this.callback = undefined;
            this.expand = true;
            return this;
        }
        /**
         * 关闭弹窗
         */
        , close: function () {
            this.expand = false;
        }
        /**
         * 设置回调函数，回调函数会在窗口打开的时候执行
         */
        , then: function (fun) {
            if (this.opened) {
                // 如果已经展开弹窗，直接调用函数
                fun();
            } else {
                // 如果弹窗关闭，等到打开的时候再调用
                this.callback = fun;
            }
        }
        /**
         * 窗口打开回调
         */
        , onOpen: async function () {
            this.opened = true;
            if (this.callback !== undefined) {
                this.callback();
                this.callback = undefined;
            }
        }
        /**
         * 窗口打开回调
         */
        , onClose: async function () {
            this.opened = false;
            if (this.onCloseDialog !== undefined) {
                this.onCloseDialog()
            }
        }
    }
}
</script>
